<template>
    <div class="homework">
        <div class="box">
            <div class="search-box">
                <el-row :gutter="20" style="margin-left: -37px">
                    <el-col :span="8">
                        <el-date-picker
                                v-model="selectDate"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd 00:00:00"
                                type="daterange"
                                @change="search"
                                clearable
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
<!--                    <el-col :span="4" style="margin-top: 3px">-->
<!--                        <el-button type="primary" size="small" :loading="loading" style="width: 70px;background: #39A5EF;" @click="search">搜 索</el-button>-->
<!--                        <el-button type="primary" size="small" style="width: 70px;background: #39A5EF;" @click="reset">重 置</el-button>-->
<!--                    </el-col>-->
                </el-row>
            </div>

            <div class="list-box" v-loading="loading">
                <div class="homework-item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
                    <div class="top" style="overflow: hidden">
                        <span style="float: left"><i class="el-icon-document" style="padding-right: 5px"></i>作业信息</span>
                        <span style="float: right">{{item.createTime}}</span>
                    </div>
                    <div class="bottom">
                        <div class="title">{{item.name}}</div>
                        <div class="content">{{item.remark}}</div>
                    </div>
                </div>
            </div>
            <el-empty description="暂无数据" v-if="total==0" :image="require('@/assets/images/empty.png')"></el-empty>
            <div class="pageBox">
                <div style="text-align: right;" class="page">
                    <el-pagination
                            hide-on-single-page
                            @current-change="currentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout=" prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <indexBottom></indexBottom>
    </div>
</template>

<script>
    import indexBottom from '../../components/indexBottom'
    import { getHomeworkList } from '../../api/course'
  export default {
    name: 'homework',
    components:{indexBottom},
    created () {
      this.onLoad()
    },
    data(){
      return{
        selectDate:[],
        list:[],
        loading:true,
        currentPage:1,
        pageSize:12,
        total:0,
      }
    },
    methods:{
      onLoad(data){
        let obj ={
          studentId:this.$store.state.user.userInfo.id,
          pageSize:this.pageSize,
          pageNum:this.currentPage,
          ...data
        }
        getHomeworkList(obj).then(res=>{
          if (res.code === 200){
            this.loading =false
            this.list = res.rows
            this.total = res.total
          }
        })
      },
      currentChange(val){
        this.currentPage = val
        console.log(val)
        this.onLoad()
      },
      search(){
        this.currentPage = 1
        if (JSON.stringify(this.selectDate)!='null'){
          let obj ={
            startTime:this.selectDate[0],
            endTime:this.selectDate[1],
          }
          this.onLoad(obj)
        }
        else{
          this.onLoad()
        }

      },
      goDetail(data){
        //  判断状态是答题还是教师已经批阅
        if(data.isPublished===0||data.isPublished===null){
          this.$router.push({params:data,name:'homeworkDetail',query: {id: data.taskLogId }})
        }else{
          this.$router.push({params:data,name:'homeworkSubmitted',query: {id: data.taskLogId }})
        }
      },
      reset(){
        this.selectDate=[]
        let obj ={
          pageSize:this.pageSize,
          pageNum:1
        }
        this.onLoad(obj)
      }
    }
  }
</script>

<style scoped lang="less">
    .homework{

        .box{
            width: 1220px;
            margin: 0 auto;
            padding: 10px;
            min-height: 650px;
        }
        .search-box{
          margin-top: 10px;
            ::v-deep .el-range-editor{
                background: #EDF1F7;
                .el-range-input{
                    background: #EDF1F7;
                }
            }
        }
        .list-box {
            margin-top: 21px;
            display: flex;
            flex-wrap: wrap;
            background-color: #FFFFFF;
            padding: 20px 12px;
          min-height: 650px;
            .homework-item {
                background: white;
                width: 270px;
                height: 172px;
                border-radius: 6px;
                margin: 0px 12px 14px;
              border: 0.5px solid #e8e8e8;
                .top{
                    border-radius: 6px 6px 0 0;
                    height: 48px;
                    background: #39A5EF;
                    padding: 0px 10px;
                    box-sizing: border-box;
                    span{
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 48px;
                    }
                }
                .bottom{
                    .title{
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #333333;
                        text-align: left;
                        margin: 10px;
                    }
                    .content{
                        text-align: left;
                        margin: 10px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #999999;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-box-orient:vertical;
                        -webkit-line-clamp:3;
                    }
                }

            }
        }
        .pageBox{
            width: 1200px;
            margin-top: 20px;
            height: 40px;
            position: relative;
            .page{
                position: absolute;
                right: 25px;
                bottom: 10px;
                border: 1px solid #E8E8E8;
                width: auto;
            }
            ::v-deep.el-pagination{
                .el-pager{
                    .number{
                        color: #999999;
                        background: #EDF1F7;
                    }
                    .active{
                        color: #39A5EF;
                    }
                    .more{
                        color: #999999;
                        background: #EDF1F7;
                    }
                }
                .btn-prev,.btn-next{
                    background: #EDF1F7 ;
                }
            }
        }
    }

</style>
